<template>
	<section style="width:100%">
		<el-tabs v-model="userDefault" type="card" @tab-click="handleClick" style="margin-top: 10px">
			<el-tab-pane label="在线数据" name="onLine">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" >
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="onlineStart"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="onlineEnd"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="drawOnline">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<div class="clear"></div>
					<div id="onLine" style="width:100%; height:400px;text-align: center"></div>
					<!--<el-col :span="24" class="toolbar" style="padding: 0px;">-->
						<!--<p style="text-align: center">游戏平台当前在线<span style="color:#f00">22</span>（即时数据）</p>-->
					<!--</el-col>-->
					<!--<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%">-->
						<!--<el-table-column prop="name" label="房间">-->
						<!--</el-table-column>-->
						<!--<el-table-column prop="name" label="当前在线人数">-->
						<!--</el-table-column>-->
					<!--</el-table>-->
					<!--<el-col :span="24" class="toolbar">-->
						<!--<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="15"  :total="total" style="float:right;">-->
						<!--</el-pagination>-->
					<!--</el-col>-->
				</section>
			</el-tab-pane>
			<el-tab-pane label="日平均在线" name="dayOnline">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" >
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="dayStart"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="dayEnd"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="dayOnline">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<div class="clear"></div>
					<div id="dayLine" style="width:100%; height:400px;"></div>
				</section>
			</el-tab-pane>
			<el-tab-pane label="日最高在线" name="dayHigh">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true" >
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="maxStart"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="maxEnd"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="dayHigh">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<div class="clear"></div>
					<div id="dayHigh" style="width:100%; height:400px;"></div>
				</section>
			</el-tab-pane>
			<el-tab-pane label="周平均在线" name="weekOnline">
				<section>
					<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
					<el-form :inline="true">
						<el-form-item label="开始时间">
							<el-date-picker
									v-model="weekStart"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="结束时间">
							<el-date-picker
									v-model="weekEnd"
									type="datetime"
									value-format="yyyy-MM-dd HH:mm:ss"
									placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" v-on:click="weekOnline">查询</el-button>
						</el-form-item>
					</el-form>
					</el-col>
					<div class="clear"></div>
					<div id="weekOnline" style="width:100%; height:400px;"></div>
				</section>
			</el-tab-pane>
		</el-tabs>

	</section>
</template>

<script>
    import echarts from 'echarts'

	export default {
        data() {
			return {
				// users: [],
                userDefault: 'onLine',
				onlineStart:'',
				onlineEnd:'',
				dayStart:'',
				dayEnd:'',
				maxStart:'',
				maxEnd:'',
				weekStart:'',
				weekEnd:'',
                chartLine: null,
				total: 100,
				page: 1,
				listLoading: false,
				onLine:{
                    date:[],
					line:[]
				},
				dayLine:{
                    date:[],
                    line:[]
				},
                maxLine:{
                    date:[],
                    line:[]
                },
                weekLine:{
                    date:[],
                    line:[]
                }
			}
		},
		created(){
            this.getDate()
		},
		methods: {
            getDate(){
                this.onlineStart =  this.Todate1(new Date(),'yyyy-MM-dd HH:mm:ss')
                this.onlineEnd =  this.Todate(new Date(),'yyyy-MM-dd HH:mm:ss')
                this.dayStart =  this.Todate1(new Date()-24*60*60*1000*7,'yyyy-MM-dd HH:mm:ss')
                this.dayEnd =  this.Todate(new Date(),'yyyy-MM-dd HH:mm:ss')
                this.maxStart =  this.Todate1(new Date()-24*60*60*1000*7,'yyyy-MM-dd HH:mm:ss')
                this.maxEnd =  this.Todate(new Date(),'yyyy-MM-dd HH:mm:ss')
                this.weekStart =  this.Todate1(new Date()-24*60*60*1000*30,'yyyy-MM-dd HH:mm:ss')
                this.weekEnd =  this.Todate(new Date(),'yyyy-MM-dd HH:mm:ss')
			},
            drawOnline() {
               	this.setLine('onLine')
				if (this.onlineStart== '' ) this.$message({message: '请选择开始时间', type: 'error'});
                if (this.onlineEnd== '' ) this.$message({message: '请选择结束时间', type: 'error'});
                let startDate = Date.parse(new Date(this.onlineStart))
                let endDate = Date.parse(new Date(this.onlineEnd))
                // startDate = startDate.substr(0,startDate.length-3)
                // endDate = endDate.substr(0,endDate.length-3)
				this.onLine.date = []
                this.onLine.line = []
				this.$axios.get('/online-users-statistics?logatstart='+startDate+'&logatend='+endDate,{},this.global().token).then((res)=>{
				    if (res.status == 200){
						let onlineUser = res.data.reverse()
						onlineUser.forEach((val)=>{
						    this.onLine.line.unshift(val.count)
                            this.onLine.date.unshift(this.changeTime(val.logAt))
						})
                        this.chartLine.setOption({
                            title: {
                                text: '在线统计'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['时间']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.onLine.date
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'在线玩家数量',
                                    type:'line',
                                    data:this.onLine.line
                                }
                            ]
                        });
                        this.chartLine.resize();
					}
				})
            },
            dayOnline() {
                this.setLine('dayLine')
                if (this.dayStart== '' ) this.$message({message: '请选择开始时间', type: 'error'});
                if (this.dayEnd== '' ) this.$message({message: '请选择结束时间', type: 'error'});
                let startDate = Date.parse(new Date(this.dayStart))
                let endDate = Date.parse(new Date(this.dayEnd))
                // startDate = startDate.substr(0,startDate.length-3)
                // endDate = endDate.substr(0,endDate.length-3)
                this.dayLine.date = []
                this.dayLine.line = []
                this.$axios.get('/online-users-statistics/avg-of-day?logatstart='+startDate+'&logatend='+endDate,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        let onlineUser = res.data.reverse()
                        onlineUser.forEach((val)=>{
                            this.dayLine.line.push(val.count)
                            this.dayLine.date.push(val._id)
                        })
                        this.chartLine.setOption({
                            title: {
                                text: '日平均在线'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['时间']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.dayLine.date
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'日平均在线',
                                    type:'line',
                                    data:this.dayLine.line
                                }
                            ]
                        });
                        this.chartLine.resize();
                    }
                })
            },
            dayHigh() {
                this.setLine('dayHigh')
                if (this.maxStart== '' ) this.$message({message: '请选择开始时间', type: 'error'});
                if (this.maxEnd== '' ) this.$message({message: '请选择结束时间', type: 'error'});
                let startDate = Date.parse(new Date(this.maxStart))
                let endDate = Date.parse(new Date(this.maxEnd))
                // startDate = startDate.substr(0,startDate.length-3)
                // endDate = endDate.substr(0,endDate.length-3)
                this.maxLine.date = []
                this.maxLine.line = []
                this.$axios.get('/online-users-statistics/max-of-day?logatstart='+startDate+'&logatend='+endDate,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        let onlineUser = res.data.reverse()
                        onlineUser.forEach((val)=>{
                            this.maxLine.line.push(val.count)
                            this.maxLine.date.push(val._id)
                        })
                        this.chartLine.setOption({
                            title: {
                                text: '日最高在线'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['时间']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.maxLine.date
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'日最高在线',
                                    type:'line',
                                    data:this.maxLine.line
                                }
                            ]
                        });
                        this.chartLine.resize();
                    }
                })
            },
            weekOnline() {
                this.setLine('weekOnline')
                if (this.weekStart== '' ) this.$message({message: '请选择开始时间', type: 'error'});
                if (this.weekEnd== '' ) this.$message({message: '请选择结束时间', type: 'error'});
                let startDate = Date.parse(new Date(this.weekStart))
                let endDate = Date.parse(new Date(this.weekEnd))
                // startDate = startDate.substr(0,startDate.length-3)
                // endDate = endDate.substr(0,endDate.length-3)
                this.weekLine.date = []
                this.weekLine.line = []
                this.$axios.get('/online-users-statistics/avg-of-week?logatstart='+startDate+'&logatend='+endDate,{},this.global().token).then((res)=>{
                    if (res.status == 200){
                        let onlineUser = res.data.reverse()
                        onlineUser.forEach((val)=>{
                            this.weekLine.line.push(val.count)
                            this.weekLine.date.push(val._id)
                        })
                        this.chartLine.setOption({
                            title: {
                                text: '周平均在线'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['时间']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: this.weekLine.date
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'周平均在线',
                                    type:'line',
                                    data:this.weekLine.line
                                }
                            ]
                        });
                        this.chartLine.resize();
                    }
                })
            },
			setLine(lineName){
                let myChart = document.getElementById(lineName);
                myChart.style.width = window.innerWidth - 250 + 'px';
                this.chartLine = echarts.init(myChart);
                let _this = this;
                window.addEventListener("resize", function () {
                    let myChart = document.getElementById(lineName);
                    myChart.style.width = window.innerWidth - 250 + 'px';
                    _this.chartLine.resize();
                });
			},
            handleClick(val){
               if (val.index == '0'){
                   this.drawOnline();
			   }else if (val.index == '1'){
                   this.dayOnline();
               }else if (val.index == '2'){
                   this.dayHigh();
               }else if (val.index == '3'){
                   this.weekOnline();
               }
            }
		},
		mounted() {
			// this.getUsers();
            this.drawOnline();
		}
	}

</script>

<style scoped lang="stylus">

</style>